<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="./maptalks/maptalks.css">
    <script src="js/config.js"></script>
    <style>
        html,
        body,
        #dsm-wraper {
            width: 100%;
            height: 100%;
        }
        
        div.content-box {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 320px;
        }
        
        div.table-wrapper {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 320px;
        }
        
        #dsm-wraper .ivu-tabs-bar {
            margin-bottom: 0;
        }
        /* content-box start*/
        
        div.content-box>div {
            float: left;
            height: 100%;
            width: 30%;
        }
        
        #video-wrapper {
            width: 40%
        }
        
        #video-wrapper>div {
            width: 50%;
            height: 50%;
            float: left;
        }
        
        #video-wrapper>div>div {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        div.video {
            background-image: url('./images/tv_default.jpg');
            background-size: cover;
        }
        
        #dsm-wraper .ivu-tabs {
            /* overflow: visible; */
        }
        /* content-box end */
        
        .mask-wrapper {
            position: absolute;
            right: 0px;
            bottom: 0px;
            top: 0px;
            left: 0px;
            z-index: 9999;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .loader-05 {
            width: 50px;
            height: 50px;
            border: .2em solid transparent;
            border-top-color: currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-05 linear infinite;
            animation: 1s loader-05 linear infinite;
            position: relative;
        }
        
        .loader-05:before {
            content: '';
            display: block;
            width: inherit;
            height: inherit;
            position: absolute;
            top: -.2em;
            left: -.2em;
            border: .2em solid currentcolor;
            border-radius: 50%;
            opacity: .5;
        }
        
        @keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        
        @-webkit-keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="mask-wrapper" id="mask-wrapper">
        <div class="box" style="position:relative;">
            <div class="loader-05"></div>
        </div>
    </div>
    <div id="dsm-wraper">
        <div class="content-box">
            <div>
                <div id="map" style="width:100%;height:100%;"></div>
            </div>
            <div id="video-wrapper" ref="videoWrapper">
                <div v-for="(item,index) in imageAndVideoList" :key="index">
                    <div v-if="item.image" style="width:100%;height:100%;">
                        <img :src="item.url" style="width:100%;height:100%;">
                    </div>
                    <div v-else="item.image" class="video">
                        <video :src="item.url" autoplay controls loop style="width:100%;height:100%;"></video>
                    </div>
                </div>
            </div>
            <div>
                <i-table border highlight-row ref="detailTable" :loading="loading" @on-current-change="onDetailChange" :columns="alarmSummaryColumns" :data="detailTableData" :height="tableHeight"></i-table>
            </div>
        </div>
        <div class="table-wrapper">
            <keep-alive>
                <Tabs :animated="true" @on-click="onClickTabs">
                    <Tab-Pane :label="$t('activeSafety.forwardAlarm')" name="forwardAlarm">
                        <i-table border highlight-row :loading="loading" ref="forwardTable" @on-current-change="onForwardAlarmChange" :columns="forwardAlarmColumns" :data="forwardAlarmList" height="283"></i-table>
                    </Tab-Pane>
                    <Tab-Pane :label="$t('activeSafety.abnormalDriving')" name="abnormalDriving">
                        <i-table border :loading="loading" highlight-row ref="abnormalTable" @on-current-change="onAbnormalDrivingChange" :columns="abnormalDrivingColumns" :data="abnormalDrivingList" height="283"></i-table>
                    </Tab-Pane>
                    <i-button size="small" slot="extra" type="primary" style="margin-top:1px;margin-right:5px;" @click="prevDay">{{$t('reportForm.beforeDay')}}</i-button>
                    <date-picker type="date" v-model="date" slot="extra" size="small" style="margin-top:5px;margin-right:8px;"></date-picker>
                    <i-button size="small" slot="extra" type="primary" style="margin-top:1px;margin-right:5px;" @click="nextDay">{{$t('reportForm.afterDay')}}</i-button>
                    <i-button size="small" slot="extra" type="primary" style="margin-top:1px;margin-right:5px;" @click="queryActiveSafety">{{$t('reportForm.query')}}</i-button>
                    <i-button size="small" slot="extra" type="success" style="margin-top:1px;margin-right:5px;" @click="prevArticle">{{$t('activeSafety.previous')}}</i-button>
                    <i-button size="small" v-if="detailTableData.length" slot="extra" style="margin-top:1px;margin-right:5px;width:100px;">{{detailIndex+1}}/{{detailTableData.length}}</i-button>
                    <i-button size="small" v-else="detailTableData.length" slot="extra" style="margin-top:1px;margin-right:5px;width:100px;">0/0</i-button>
                    <i-button size="small" slot="extra" type="success" style="margin-top:1px;margin-right:5px;" @click="nextArticle">{{$t('activeSafety.next')}}</i-button>
                </Tabs>
            </keep-alive>
        </div>
    </div>
    <script src="dist/vue.min.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="js/language.js"></script>
    <script src="custom/languageex.js"></script>
    <script src="js/zh-CN.js"></script>
    <script src="js/en-US.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/util.js"></script>
    <script src="js/hashmap.js"></script>
    <script src="js/localcachemgr.js"></script>
    <script src="js/transformlatlon.js"></script>
    <script src="./maptalks/maptalks.min.js"></script>
    <!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=e7SC5rvmn2FsRNE4R1ygg44n"></script> -->
    <script type="text/javascript">
        var isZh = utils.locale === 'zh';
        var timeDifference = DateFormat.getOffset();
        var deviceid = utils.getParameterByName("deviceid");
        var token = utils.getParameterByName("token");
        var mapType = utils.getParameterByName("maptype");
        var isZh = utils.locale === 'zh';
        var isLoadingMap = false;
        iview.lang(isZh ? 'zh-CN' : 'en-US');
        var lang = new Vue({
            i18n: utils.getI18n()
        });
        document.title = lang.$t('monitor.activeSafety');
        var vRoot = new Vue({
            el: '#dsm-wraper',
            i18n: utils.getI18n(),
            data: {
                loading: false,
                date: new Date(),
                mapType: mapType ? mapType : 'bMap',
                tabsKey: 'forwardAlarm',
                tableHeight: 100,
                detailIndex: 0,
                alarmSummaryColumns: [{
                    type: 'index',
                    width: 60,
                    align: 'center'
                }, {
                    title: lang.$t('activeSafety.alarmEvent'),
                    key: 'alarmevent',
                    width: 135,
                    render: function(h, params) {
                        var alarmevent = '';

                        if (vRoot.tabsKey == 'forwardAlarm') {
                            switch (params.row.alarmevent) {
                                case 1:
                                    alarmevent = lang.$t('activeSafety.forwardCollision');
                                    break;
                                case 2:
                                    alarmevent = lang.$t('activeSafety.laneDeparture');
                                    break;
                                case 3:
                                    alarmevent = lang.$t('activeSafety.tooClose');
                                    break;
                                case 4:
                                    alarmevent = lang.$t('activeSafety.pedestrianCollision');
                                    break;
                                case 5:
                                    alarmevent = lang.$t('activeSafety.frequentLaneChange');
                                    break;
                                case 6:
                                    alarmevent = lang.$t('activeSafety.logoOverrun');
                                    break;
                                case 7:
                                    alarmevent = lang.$t('activeSafety.obstacleAlarm');
                                    break;
                                case 8:
                                case 9:
                                case 0xA:
                                case 0xB:
                                case 0xC:
                                case 0xD:
                                case 0xE:
                                case 0xF:
                                    alarmevent = lang.$t('activeSafety.userDefined') + '(' + params.row.alarmevent + ')';
                                    break;
                                case 0x10:
                                    alarmevent = lang.$t('activeSafety.signRecognition');
                                    break;
                                case 0x11:
                                    alarmevent = lang.$t('activeSafety.activeCapture');
                                    break;
                                case 0x12:
                                case 0x13:
                                case 0x14:
                                case 0x15:
                                case 0x16:
                                case 0x17:
                                case 0x18:
                                case 0x19:
                                case 0x1A:
                                case 0x1B:
                                case 0x1C:
                                case 0x1D:
                                case 0x1E:
                                case 0x1F:
                                    alarmevent = lang.$t('activeSafety.userDefined') + '(' + params.row.alarmevent + ')';
                                    break;
                                default:
                                    alarmevent = lang.$t('activeSafety.userDefined') + '(' + params.row.alarmevent + ')';
                                    break;
                            }
                        } else {
                            switch (params.row.alarmevent) {
                                case 1:
                                    alarmevent = lang.$t('activeSafety.fatigueDriving');
                                    break;
                                case 2:
                                    alarmevent = lang.$t('activeSafety.answerPhone');
                                    break;
                                case 3:
                                    alarmevent = lang.$t('activeSafety.smokingAlarm');
                                    break;
                                case 4:
                                    alarmevent = lang.$t('activeSafety.distractedDriving');
                                    break;
                                case 5:
                                    alarmevent = lang.$t('activeSafety.abnormalDriver');
                                    break;
                                case 0x06:
                                    alarmevent = lang.$t('activeSafety.safetyBeltAlarm');
                                    break;
                                case 0x07:
                                case 0x08:
                                case 0x09:
                                case 0x0A:
                                case 0x0B:
                                case 0x0C:
                                case 0x0D:
                                case 0x0E:
                                case 0x0F:
                                    alarmevent = lang.$t('activeSafety.userDefined') + '(' + params.row.alarmevent + ')';
                                    break;
                                case 0x10:
                                    alarmevent = lang.$t('activeSafety.autoCapture');
                                    break;
                                case 0x11:
                                    alarmevent = lang.$t('activeSafety.driverChange');
                                    break;
                                case 0x12:
                                    alarmevent = lang.$t('activeSafety.customEvents') + '(' + params.row.alarmevent + ')';
                                    break;
                                default:
                                    alarmevent = lang.$t('activeSafety.customEvents') + '(' + params.row.alarmevent + ')';
                                    break;
                            }
                        }


                        return h('span', {}, alarmevent);
                    }
                }, {
                    title: lang.$t('activeSafety.alarmLevel'),
                    key: 'alarmlevel',
                    width: 105,
                }, {
                    title: lang.$t('activeSafety.alarmTime'),
                    key: "alarmtime",
                    render: function(h, params) {
                        return h('span', {}, DateFormat.longToLocalDateTimeStr(params.row.updatetime));
                    }
                }],
                forwardAlarmColumns: [{
                    type: 'index',
                    width: 60,
                    align: 'center'
                }, {
                    title: lang.$t('activeSafety.alarmEvent'),
                    key: 'alarmevent',
                    width: 150,
                    render: function(h, params) {
                        var alarmevent = '';
                        switch (params.row.alarmevent) {
                            case 1:
                                alarmevent = lang.$t('activeSafety.forwardCollision');
                                break;
                            case 2:
                                alarmevent = lang.$t('activeSafety.laneDeparture');
                                break;
                            case 3:
                                alarmevent = lang.$t('activeSafety.tooClose');
                                break;
                            case 4:
                                alarmevent = lang.$t('activeSafety.pedestrianCollision');
                                break;
                            case 5:
                                alarmevent = lang.$t('activeSafety.frequentLaneChange');
                                break;
                            case 6:
                                alarmevent = lang.$t('activeSafety.logoOverrun');
                                break;
                            case 7:
                                alarmevent = lang.$t('activeSafety.obstacleAlarm');
                                break;
                            case 8:
                            case 9:
                            case 0xA:
                            case 0xB:
                            case 0xC:
                            case 0xD:
                            case 0xE:
                            case 0xF:
                                alarmevent = lang.$t('activeSafety.userDefined') + '(' + params.row.alarmevent + ')';
                                break;
                            case 0x10:
                                alarmevent = lang.$t('activeSafety.signRecognition');
                                break;
                            case 0x11:
                                alarmevent = lang.$t('activeSafety.activeCapture');
                                break;
                            case 0x12:
                            case 0x13:
                            case 0x14:
                            case 0x15:
                            case 0x16:
                            case 0x17:
                            case 0x18:
                            case 0x19:
                            case 0x1A:
                            case 0x1B:
                            case 0x1C:
                            case 0x1D:
                            case 0x1E:
                            case 0x1F:
                                alarmevent = lang.$t('activeSafety.userDefined') + '(' + params.row.alarmevent + ')';
                                break;
                            default:
                                alarmevent = lang.$t('activeSafety.userDefined') + '(' + params.row.alarmevent + ')';
                                break;
                        }
                        return h('span', {}, alarmevent);
                    }
                }, {
                    title: lang.$t('activeSafety.alarmLevel'),
                    key: 'alarmlevel',
                    width: 120,
                }, {
                    title: lang.$t('activeSafety.alarmCount'),
                    key: 'alarmcount',
                    width: 120,
                }, {
                    title: lang.$t('activeSafety.firstAlarmTime'),
                    key: 'startalarmtime',
                    width: 160,
                    render: function(h, params) {
                        return h('span', {}, DateFormat.longToLocalDateTimeStr(params.row.startalarmtime));
                    }
                }, {
                    title: lang.$t('activeSafety.lastAlarmTime'),
                    key: 'endalarmtime',
                    width: 160,
                    render: function(h, params) {
                        return h('span', {}, DateFormat.longToLocalDateTimeStr(params.row.endalarmtime));
                    }
                }, {
                    title: lang.$t('activeSafety.firstAlarmSpeed'),
                    key: 'startspeed',
                    width: 150,
                    render: function(h, params) {
                        var startspeed = params.row.startspeed / 1000
                        return h('span', {}, startspeed + 'km/h');
                    }
                }, {
                    title: lang.$t('activeSafety.lastAlarmSpeed'),
                    key: 'endspeed',
                    width: 150,
                    render: function(h, params) {
                        var endspeed = params.row.endspeed / 1000
                        return h('span', {}, endspeed + 'km/h');
                    }
                }, {
                    title: lang.$t('activeSafety.firstAlarmAddress'),
                    key: 'startposition',
                    render: function(h, params) {
                        var callat = params.row.startlat.toFixed(5);
                        var callon = params.row.startlon.toFixed(5);
                        var address = LocalCacheMgr.getAddress(callon, callat);

                        if (address) {
                            return h('span', {}, address);
                        } else {
                            return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                on: {
                                    click: function(e) {
                                        e.preventDefault();
                                        vRoot.queryAddress(callon, callat, function(address) {
                                            console.log('address', address);
                                            if (vRoot.tabsKey === 'abnormalDriving') {
                                                vRoot.abnormalDrivingList[params.index].address = address;
                                            } else {
                                                vRoot.forwardAlarmList[params.index].address = address;
                                            }
                                            LocalCacheMgr.setAddress(callon, callat, address);
                                        })
                                    }
                                }
                            }, lang.$t('reportForm.getAddress'));
                        }
                    }
                }, {
                    title: lang.$t('activeSafety.lastAlarmAddress'),
                    key: 'endposition',
                    render: function(h, params) {
                        var callat = params.row.endlat.toFixed(5);
                        var callon = params.row.endlon.toFixed(5);
                        var address = LocalCacheMgr.getAddress(callon, callat);

                        if (address) {
                            return h('span', {}, address);
                        } else {
                            return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                on: {
                                    click: function(e) {
                                        e.preventDefault();
                                        e.preventDefault();
                                        vRoot.queryAddress(callon, callat, function(address) {
                                            if (vRoot.tabsKey === 'abnormalDriving') {
                                                vRoot.abnormalDrivingList[params.index].address = address;
                                            } else {
                                                vRoot.forwardAlarmList[params.index].address = address;
                                            }
                                            LocalCacheMgr.setAddress(callon, callat, address);
                                        });
                                    }
                                }
                            }, lang.$t('reportForm.getAddress'));
                        }
                    }
                }, ],
                abnormalDrivingColumns: [{
                    type: 'index',
                    width: 60,
                    align: 'center'
                }, {
                    title: lang.$t('activeSafety.alarmEvent'),
                    key: 'alarmevent',
                    width: 150,
                    render: function(h, params) {
                        var alarmevent = '';
                        switch (params.row.alarmevent) {
                            case 1:
                                alarmevent = lang.$t('activeSafety.fatigueDriving');
                                break;
                            case 2:
                                alarmevent = lang.$t('activeSafety.answerPhone');
                                break;
                            case 3:
                                alarmevent = lang.$t('activeSafety.smokingAlarm');
                                break;
                            case 4:
                                alarmevent = lang.$t('activeSafety.distractedDriving');
                                break;
                            case 5:
                                alarmevent = lang.$t('activeSafety.abnormalDriver');
                                break;
                            case 0x06:
                                alarmevent = lang.$t('activeSafety.safetyBeltAlarm');
                                break;
                            case 0x07:
                            case 0x08:
                            case 0x09:
                            case 0x0A:
                            case 0x0B:
                            case 0x0C:
                            case 0x0D:
                            case 0x0E:
                            case 0x0F:
                                alarmevent = lang.$t('activeSafety.userDefined') + '(' + params.row.alarmevent + ')';
                                break;
                            case 0x10:
                                alarmevent = lang.$t('activeSafety.autoCapture');
                                break;
                            case 0x11:
                                alarmevent = lang.$t('activeSafety.driverChange');
                                break;
                            case 0x12:
                                alarmevent = lang.$t('activeSafety.customEvents') + '(' + params.row.alarmevent + ')';
                                break;
                            default:
                                alarmevent = lang.$t('activeSafety.userDefined') + '(' + params.row.alarmevent + ')';
                                break;
                        }
                        return h('span', {}, alarmevent);
                    }
                }, {
                    title: lang.$t('activeSafety.alarmLevel'),
                    key: 'alarmlevel',
                    width: 120,
                }, {
                    title: lang.$t('activeSafety.alarmCount'),
                    key: 'alarmcount',
                    width: 120,
                }, {
                    title: lang.$t('activeSafety.firstAlarmTime'),
                    key: 'startalarmtime',
                    width: 160,
                    render: function(h, params) {
                        return h('span', {}, DateFormat.longToLocalDateTimeStr(params.row.startalarmtime));
                    }
                }, {
                    title: lang.$t('activeSafety.lastAlarmTime'),
                    key: 'endalarmtime',
                    width: 160,
                    render: function(h, params) {
                        return h('span', {}, DateFormat.longToLocalDateTimeStr(params.row.endalarmtime));
                    }
                }, {
                    title: lang.$t('activeSafety.firstAlarmSpeed'),
                    key: 'startspeed',
                    width: 150,
                    render: function(h, params) {
                        var startspeed = params.row.startspeed / 1000
                        return h('span', {}, startspeed + 'km/h');
                    }
                }, {
                    title: lang.$t('activeSafety.lastAlarmSpeed'),
                    key: 'endspeed',
                    width: 150,
                    render: function(h, params) {
                        var endspeed = params.row.endspeed / 1000
                        return h('span', {}, endspeed + 'km/h');
                    }
                }, {
                    title: lang.$t('activeSafety.firstAlarmAddress'),
                    key: 'startposition',
                    render: function(h, params) {
                        var callat = params.row.startlat.toFixed(5);
                        var callon = params.row.startlon.toFixed(5);
                        var address = LocalCacheMgr.getAddress(callon, callat);
                        if (address) {
                            return h('span', {}, address);
                        } else {
                            return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                on: {
                                    click: function(e) {
                                        e.preventDefault();
                                        vRoot.queryAddress(callon, callat, function(address) {

                                            if (vRoot.tabsKey === 'abnormalDriving') {
                                                vRoot.abnormalDrivingList[params.index].address = address;
                                            } else {
                                                alert(1)
                                                vRoot.forwardAlarmList[params.index].address = address;
                                            }
                                            LocalCacheMgr.setAddress(callon, callat, address);
                                        })
                                    }
                                }
                            }, lang.$t('reportForm.getAddress'));
                        }
                    }
                }, {
                    title: lang.$t('activeSafety.lastAlarmAddress'),
                    key: 'endposition',
                    render: function(h, params) {
                        var callat = params.row.endlat.toFixed(5);
                        var callon = params.row.endlon.toFixed(5);
                        var address = LocalCacheMgr.getAddress(callon, callat);
                        if (address) {
                            return h('span', {}, address);
                        } else {
                            return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                on: {
                                    click: function(e) {
                                        e.preventDefault();
                                        e.preventDefault();
                                        vRoot.queryAddress(callon, callat, function(address) {
                                            if (vRoot.tabsKey === 'abnormalDriving') {
                                                vRoot.abnormalDrivingList[params.index].address = address;
                                            } else {
                                                alert(1)
                                                vRoot.forwardAlarmList[params.index].address = address;
                                            }
                                            LocalCacheMgr.setAddress(callon, callat, address);
                                        });
                                    }
                                }
                            }, lang.$t('reportForm.getAddress'));
                        }
                    }
                }, ],
                abnormalDrivingList: [],
                forwardAlarmList: [],
                detailTableData: [],
                imageAndVideoList: [{
                    image: true,
                    url: './images/tv_default.jpg',
                    videoUrl: ''
                }, {
                    image: true,
                    url: './images/tv_default.jpg',
                    videoUrl: ''
                }, {
                    image: true,
                    url: './images/tv_default.jpg',
                    videoUrl: ''
                }, {
                    image: true,
                    url: './images/tv_default.jpg',
                    videoUrl: ''
                }, ]
            },
            methods: {
                prevArticle: function() {
                    if (this.detailTableData.length) {
                        this.detailIndex--;
                        if (this.detailIndex < 0) {
                            this.detailIndex = this.detailTableData.length - 1;
                        }
                        this.$refs.detailTable.$refs.tbody.clickCurrentRow(this.detailIndex);
                    }
                },
                nextArticle: function() {
                    if (this.detailTableData.length) {
                        this.detailIndex++;
                        if (this.detailIndex > this.detailTableData.length - 1) {
                            this.detailIndex = 0;
                        }
                        this.$refs.detailTable.$refs.tbody.clickCurrentRow(this.detailIndex);
                    }
                },
                onClickTabs: function(name) {
                    this.tabsKey = name;
                },
                initMap: function() {
                    var self = this;
                    this.markerLayer = null;
                    this.mapInstance = utils.initWindowMap('map');
                },
                nextDay: function() {
                    this.date = new Date(this.date.getTime() + 60 * 60 * 24 * 1000);
                },
                prevDay: function() {
                    this.date = new Date(this.date.getTime() - 60 * 60 * 24 * 1000);
                },
                createMarker: function(track) {
                    var tempPoint = ol.proj.fromLonLat([track.callon, track.callat]),
                        iconFeature;
                    iconFeature = new ol.Feature({
                        geometry: new ol.geom.Point(tempPoint),
                    });
                    iconFeature.setStyle(this.getIcon(track));
                    return iconFeature;
                },
                selectedDetailFirstRow: function() {
                    var that = this;
                    setTimeout(() => {
                        try {
                            if (that.detailTableData.length) {
                                that.$refs.detailTable.$refs.tbody.clickCurrentRow(0);
                            }
                        } catch (error) {

                        }
                    }, 500);
                },
                onAbnormalDrivingChange: function(current) {
                    this.detailTableData = current ? current.records : [];
                    this.detailIndex = 0;
                    if (this.detailTableData.length === 0) return;
                    this.selectedDetailFirstRow();
                },
                onForwardAlarmChange: function(current) {

                    this.detailTableData = current ? current.records : [];
                    this.detailIndex = 0;
                    if (this.detailTableData.length === 0) return;
                    this.selectedDetailFirstRow();
                },
                getIcon: function() {
                    var imgPath = '';
                    if (utils.isLocalhost()) {
                        imgPath = myUrls.viewhost + 'images/carstate';
                    } else {
                        imgPath = './images/carstate';
                    }

                    imgPath += '/0_green_0.png'
                    return new BMap.Icon(imgPath, new BMap.Size(36, 36));
                },
                onDetailChange: function(current) {
                    console.log('current', current);
                    var that = this;
                    this.detailTableData.forEach(function(item, index) {
                        if (current.activesafetyid === item.activesafetyid) {
                            that.detailIndex = index;
                        }
                    });

                    utils.showWindowMap(that, {
                        row: {
                            callat: current.lat,
                            callon: current.lon,
                        }
                    });


                    this.imageAndVideoList = this.getImageAndVideoList(current);

                },
                getMediaTypeWithIndex: function(data, filetype, index) {
                    var playURL = null;
                    var foundCount = 0;
                    for (var i = 1; i < 6; i++) {
                        var attachfile = data['attachfile' + i];
                        if (attachfile && data['attachstatus' + i] === 1) {
                            if (data['attachfiletype' + i] === filetype) {
                                foundCount++;
                                if (foundCount === index) {
                                    playURL = this.playRootPath + attachfile;
                                    break;
                                }
                            }
                        };
                    }
                    return playURL;
                },
                getImageAndVideoList: function(data) {
                    var defaultUrl = './images/tv_default.jpg';
                    var imageAndVideoList = [];
                    // var imageUrl1 = data.attachfile1;
                    // var imageUrl2 = data.attachfile2;
                    // var imageUrl3 = data.attachfile3;
                    // var imageUrl4 = data.attachfile4;


                    var videoUrl = this.getMediaTypeWithIndex(data, 2, 1);
                    var imageUrl1 = this.getMediaTypeWithIndex(data, 0, 1);
                    var imageUrl2 = this.getMediaTypeWithIndex(data, 0, 2);
                    var imageUrl3 = this.getMediaTypeWithIndex(data, 0, 3);

                    if (videoUrl) {
                        imageAndVideoList.push({
                            image: videoUrl ? false : true,
                            url: videoUrl
                        })
                    }

                    if (imageUrl1) {
                        imageAndVideoList.push({
                            image: true,
                            url: imageUrl1
                        })
                    }

                    if (imageUrl2) {
                        imageAndVideoList.push({
                            image: true,
                            url: imageUrl2
                        })
                    }

                    if (imageUrl3) {
                        imageAndVideoList.push({
                            image: true,
                            url: imageUrl3
                        })
                    }




                    for (var i = 0; i < (4 - imageAndVideoList.length); i++) {
                        imageAndVideoList.push({
                            image: true,
                            url: defaultUrl
                        })
                    }



                    return imageAndVideoList;
                },
                queryAddress: function(callon, callat, callback) {
                    var that = this;
                    utils.getJiuHuAddressSyn(callon, callat, function(resp) {
                        if (resp.status > 9900) {
                            console.log('getJiuHuAddressSyn token失效,请重新登录')
                        } else if (resp.status == 0) {
                            var j_address = resp.address;
                            callback(j_address);
                        } else {
                            console.log('getJiuHuAddressSyn 查询地址失败')
                        }
                    });
                },
                getTableHeight: function() {
                    var wHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    return wHeight - 320;
                },
                handleAlarmEventClassify: function(alarmTypeObject, record) {
                    var alarmevent = record.alarmevent;
                    var eventList = alarmTypeObject[alarmevent];
                    if (eventList === undefined) {
                        eventList = {};
                        eventList.records = [];
                        eventList.startalarmtime = 0;
                        eventList.endalarmtime = 0;
                        eventList.startspeed = 0;
                        eventList.endspeed = 0;
                        eventList.alarmcount = 0;
                        eventList.startlon = 0;
                        eventList.startlat = 0;
                        eventList.endlat = 0;
                        eventList.endlon = 0;
                        eventList.alarmevent = alarmevent;
                        eventList.alarmlevel = record.alarmlevel;
                        alarmTypeObject[alarmevent] = eventList;
                    }

                    eventList.alarmcount++;
                    if (eventList.startalarmtime == 0) {
                        eventList.startalarmtime = record.updatetime;
                        eventList.startspeed = record.speed;
                        eventList.startlat = record.lat;
                        eventList.startlon = record.lon;
                    }

                    if (eventList.endalarmtime == 0) {
                        eventList.endalarmtime = record.updatetime;
                        eventList.endspeed = record.speed;
                        eventList.endlat = record.lat;
                        eventList.endlon = record.lon;
                    }
                    if (eventList.startalarmtime > record.updatetime) {
                        eventList.startalarmtime = record.updatetime;
                        eventList.startspeed = record.speed;
                        eventList.startlat = record.lat;
                        eventList.startlon = record.lon;
                    }
                    if (eventList.endalarmtime < record.updatetime) {
                        eventList.endalarmtime = record.updatetime;
                        eventList.endspeed = record.speed;
                        eventList.endlat = record.lat;
                        eventList.endlon = record.lon;
                    }

                    eventList.records.push(record);
                },
                handleAlarmTypeClassify: function(records) {
                    var that = this;
                    that.recordsObj = {};
                    records.forEach(function(item) {
                        var alarmTypeObject = that.recordsObj[item.alarmtype + ''];
                        if (alarmTypeObject === undefined) {
                            alarmTypeObject = {};
                            that.recordsObj[item.alarmtype] = alarmTypeObject;
                        }
                        that.handleAlarmEventClassify(alarmTypeObject, item);
                    })

                    this.getEventList(that.recordsObj);
                },
                getEventList: function(alarmTypeObject) {
                    var abnormalDrivingList = [],
                        forwardAlarmList = [],
                        that = this;
                    for (var key in alarmTypeObject) {
                        if (key == 100) {
                            var forwardAlarmObj = alarmTypeObject[key];
                            for (var k in forwardAlarmObj) {
                                var item = forwardAlarmObj[k];
                                var callat = item.endlat.toFixed(5);
                                var callon = item.endlon.toFixed(5);
                                var address = LocalCacheMgr.getAddress(callon, callat);
                                item.address = address;
                                item.disabled = address ? true : false;
                                forwardAlarmList.push(item);
                            }
                        } else if (key == 101) {
                            var abnormalDriving = alarmTypeObject[key];
                            for (var k in abnormalDriving) {
                                var item = abnormalDriving[k];
                                var callat = item.endlat.toFixed(5);
                                var callon = item.endlon.toFixed(5);
                                var address = LocalCacheMgr.getAddress(callon, callat);
                                item.address = address;
                                item.disabled = address ? true : false;
                                abnormalDrivingList.push(item);
                            }
                        }
                    }
                    this.forwardAlarmList = forwardAlarmList.sort(function(a, b) {
                        return b.endalarmtime - a.endalarmtime;
                    });
                    this.abnormalDrivingList = abnormalDrivingList.sort(function(a, b) {
                        return b.endalarmtime - a.endalarmtime;
                    });
                    // setTimeout(() => {
                    //     if (that.forwardAlarmList.length) {
                    //         that.$refs.forwardTable.$refs.tbody.clickCurrentRow(0);
                    //         that.selectedDetailFirstRow();
                    //     }
                    // }, 500)
                    this.showRightDetail(this.tabsKey);
                },
                queryActiveSafety: function() {
                    var url = myUrls.queryActiveSafetyTrack(),
                        that = this;
                    var data = {
                        deviceid: deviceid,
                        begintime: DateFormat.format(this.date, 'yyyy-MM-dd') + ' 00:00:00',
                        endtime: DateFormat.format(this.date, 'yyyy-MM-dd') + ' 23:59:59',
                        timezone: timeDifference
                    };
                    that.loading = true;
                    utils.sendAjax(url, data, function(resp) {
                        that.loading = false;
                        if (resp.status == 0) {
                            var records = resp.records;
                            if (records.length) {
                                records.sort(function(a, b) {
                                    return b.updatetime - a.updatetime;
                                });
                                that.playRootPath = resp.playrootpath;
                                that.handleAlarmTypeClassify(records);
                            } else {
                                that.$Message.error(that.$t('activeSafety.noData'));
                                that.forwardAlarmList = [];
                                that.abnormalDrivingList = [];
                                that.detailTableData = [];
                            }
                        } else {
                            that.$Message.error(that.$t('monitor.queryFail'));
                        }
                        document.getElementById('mask-wrapper').style.display = 'none';
                    })
                },
                initApp: function() {
                    var me = this;
                    this.initMap();
                    this.tableHeight = this.getTableHeight();
                    this.queryActiveSafety();

                    window.onresize = function() {
                        me.tableHeight = me.getTableHeight();
                    };
                },
                showRightDetail: function(newVal) {
                    var that = this;
                    this.detailIndex = 0;
                    that.detailTableData = [];
                    setTimeout(function() {
                        if (newVal == 'forwardAlarm') {
                            that.$refs.abnormalTable.clearCurrentRow(that.detailIndex);
                            if (that.forwardAlarmList.length) {
                                that.$refs.forwardTable.$refs.tbody.clickCurrentRow(that.detailIndex);
                                that.selectedDetailFirstRow();
                            }

                        } else if (newVal == 'abnormalDriving') {
                            that.$refs.forwardTable.clearCurrentRow();
                            if (that.abnormalDrivingList.length) {
                                that.$refs.abnormalTable.$refs.tbody.clickCurrentRow(that.detailIndex);
                                that.selectedDetailFirstRow();
                            }
                        }

                    }, 500)
                }
            },
            computed: {
                videoStyle: function() {
                    var videoWrapper = this.$refs.videoWrapper;
                    return {
                        width: (getComputedStyle(videoWrapper).width / 2) + 'px',
                        height: (getComputedStyle(videoWrapper).height / 2) + 'px',
                    }
                }
            },
            watch: {
                tabsKey: function(newVal) {
                    this.showRightDetail(newVal);
                }
            },
            mounted: function() {
                this.map = null;
                this.initApp();
            },
        })
    </script>
</body>

</html>